<template>
  <div class="container">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" title="编辑分类商品" />
    <div class="content">
      <div class="content_input_container">
      <el-input class="content_input" placeholder="请输入内容" v-model="name" clearable :disabled="$route.query.site_id=='0'"></el-input>
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="content_list">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="item in list" :key="item" class="content_list_item">
            <div style="width:8%" v-if="$route.query.site_id!='0'">
              <img
                src="../../../static/appimg/delet.png"
                @click="deleteClick(item)"
                alt
                style="width:14px;height:14px"
              />
            </div>
            <div style="width:25%">
              <img :src="item.image1|| 'https://91haoka.cn/gth/static/img/kenan.jpg'" alt style="width:56px;height:56px;border-radius:5px" />
            </div>
            <div style="width:80%; margin-left: 8px">
              <div style="font-size:15px">{{item.title}}</div>
              <div style="font-size:12px;color:#787D85;display:flex;justify-content:space-between">
                <div style="margin-top:3px">商品编码：{{item.fetch_code}}</div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <el-button type="primary" class="content-button" @click="savebtn">保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search: {
        page: 1,
        page_Size: 10
      },
      list: [],
      total: 1,
      input: "",
      loading: false,
      finished: false,
      refreshing: false,
      deleteData: [],
      name: this.$route.query.name
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.search = {
        page: 1,
        page_Size: 20
      };
      this.getList();
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 商品管理列表
    getList() {
      axios
        .get("/own/category/page/list", {
          params: { ...this.search, category_id: this.$route.query.category_id }
        })
        .then(response => {
          if (response.data.msg.code == 0) {
            this.list =
              this.search.page == 1
                ? response.data.data.data
                : this.list.concat(response.data.data.data);
            this.total = response.data.data.total;
            this.loading = false;
            this.refreshing = false;
            if (this.list.length >= this.total) {
              this.finished = true;
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    onLoad() {
      this.search.page++;
      this.getList();
    },
    deleteClick(row) {
      this.list = this.list.filter(item => item.id != row.id);
      this.deleteData.push(row);
    },
    savebtn() {
      if (this.deleteData.length > 0) {
        axios
          .post(`/own/category/link/all/clear`, {
            page_id: this.deleteData.map(i => i.id).join(","),
            category_id: this.$route.query.category_id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("批量删除成功");
              this.onRefresh();
            } else {
              this.$message.error(response.data.msg.info);
              this.onRefresh();
            }
          });
      }
      if (this.name != this.$route.query.name) {
        axios
          .post(`/own/category/update`, {
            name: this.name,
            id: Number(this.$route.query.category_id)
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("分类名称修改成功");
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .content {
    padding: 15px;
    &-button {
      position: absolute;
      width: calc(100% - 30px);
      height: 36px;
      bottom: 15px;
      left: 15px;
      border-radius: 15px;
    }
    &_list {
      height: calc(100% - 120px);
      overflow: auto;
      &_item {
        width: 100%;
        height: 87.5px;
        background: white;
        border-radius: 10px;
        margin-top: 10px;
        display: flex;
        padding: 0 15px;
        align-items: center;
      }
    }
    flex: 1;
    overflow: auto;
    position: relative;
  }
}
/deep/ .van-nav-bar__text{
  color: black !important;
}
/deep/ .van-nav-bar .van-icon {
  color: black !important;
}
/deep/.content_input_container .content_input .el-input__inner {
   border: none !important;
   background: white !important;
   height: 51px !important;
   border-radius: 10px !important;
}
</style>